<!--conf
<sample>
               <product version="1.6" edition="std"/>
                       <modifications>
                               <modified date="080512"/>
                       </modifications>
               </sample>
 --> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Setting custom attributes</title>
	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
	
	<script  src="../../codebase/dhtmlxcommon.js"></script>
	<script  src="../../codebase/dhtmlxgrid.js"></script>		
	<script  src="../../codebase/dhtmlxgridcell.js"></script>	
</head>

<body>
<link rel='STYLESHEET' type='text/css' href='../common/style.css'>
<table cellspacing="0" cellpadding="0" class="sample_header" border="0">
	<tr valign="middle">
		<!-- COMPONENT ICON -->
		<td width="40" align="center"><img src="../common/dhtmlxgrid_icon.gif" border="0"></td>
		<!-- COMPONENT NAME -->
		<td width="150" align="left" nowrap="true">Sample: dhtmlxGrid</td>
		<!-- SAMPLE TITLE -->
		<td width="0" align="left" nowrap><b>Setting custom attributes</b></td>
		<!-- LINK TO COMPONENT PAGE -->
		<td width="0" align="right"><a href="http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml">dhtmlxGrid main page</a></td>
		<!-- CLOSE BUTTON -->
		<td width="50"><div class="sample_close"><a href="javascript:void(0);" onclick="self.close();"><img src="../common/sample_close.gif" width="14" height="14" border="0" alt="X"></a></div></td>
	</tr>
</table>
	
	
<p>Grid allows to set custom attributes for rows by the xml or using setRowAttribute grid method. In order to get attributes getRowAttribute method can be used.</p>	
<table>
<tr>
<td valign="top">
<select id="sel">
	<option value="price">price</option>
	<option value="date">date of publication</option>
</select>
<input type="button" name="a2" value="show attribute" onclick="alert(mygrid.getRowAttribute(mygrid.getSelectedId(),document.getElementById('sel').value));">
</td>
</tr>
<tr>
<td  valign="top"><div id="gridbox" width="600px" height="250px" style="background-color:white;overflow:hidden"></div></td>
</tr>
<tr>
<td valign="top">
Name: <input type="text" id="val" size="18"> Value: <input type="text" id="txt" size="18">&nbsp; 

<input type="button" name="a2" value="add attribute to selected" onclick="if(document.getElementById('val').value!='' && document.getElementById('txt').value!=''){ addAttrToSelect(document.getElementById('val').value); mygrid.setRowAttribute(mygrid.getSelectedId(),document.getElementById('val').value,document.getElementById('txt').value);mygrid.xml.row_attrs.push(document.getElementById('val').value);} else alert('Please, enter name and value')"></td> 
</td>
</tr>
</table>	
<div class='sample_code'><div class="hl-main"><pre><span class="hl-code"> 
</span><span class="hl-comment">/*</span><span class="hl-comment">getting attributes</span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">mygrid</span><span class="hl-code">.</span><span class="hl-identifier">getRowAttribute</span><span class="hl-brackets">(</span><span class="hl-identifier">row_id</span><span class="hl-code">,</span><span class="hl-identifier">name</span><span class="hl-brackets">)</span><span class="hl-code">);
 
</span><span class="hl-comment">/*</span><span class="hl-comment">setting attributes</span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">mygrid</span><span class="hl-code">.</span><span class="hl-identifier">setRowAttribute</span><span class="hl-brackets">(</span><span class="hl-identifier">row_id</span><span class="hl-code">,</span><span class="hl-identifier">name</span><span class="hl-code">,</span><span class="hl-identifier">value</span><span class="hl-brackets">)</span><span class="hl-code">;
 
</span><span class="hl-comment">/*</span><span class="hl-comment">adding new attribute to serialization string</span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">mygrid</span><span class="hl-code">.</span><span class="hl-identifier">xml</span><span class="hl-code">.</span><span class="hl-identifier">row_attrs</span><span class="hl-code">.</span><span class="hl-identifier">push</span><span class="hl-brackets">(</span><span class="hl-identifier">name</span><span class="hl-brackets">)</span><span class="hl-code">;
 
</span><span class="hl-identifier">XML</span><span class="hl-code">:
 
&lt;?</span><span class="hl-identifier">xml</span><span class="hl-code"> </span><span class="hl-identifier">version</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">1.0</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-identifier">encoding</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">UTF-8</span><span class="hl-quotes">&quot;</span><span class="hl-code">?&gt;
&lt;</span><span class="hl-identifier">rows</span><span class="hl-code">&gt;
    &lt;</span><span class="hl-identifier">row</span><span class="hl-code"> </span><span class="hl-identifier">id</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">1</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-identifier">date</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">05/01/1998</span><span class="hl-quotes">&quot;</span><span class="hl-code"> </span><span class="hl-identifier">price</span><span class="hl-code">=</span><span class="hl-quotes">&quot;</span><span class="hl-string">12.99</span><span class="hl-quotes">&quot;</span><span class="hl-code">&gt;
        &lt;</span><span class="hl-identifier">cell</span><span class="hl-code">&gt;-</span><span class="hl-number">1500</span><span class="hl-code">&lt;/</span><span class="hl-identifier">cell</span><span class="hl-code">&gt;
        &lt;</span><span class="hl-identifier">cell</span><span class="hl-code">&gt;</span><span class="hl-identifier">A</span><span class="hl-code"> </span><span class="hl-identifier">Time</span><span class="hl-code"> </span><span class="hl-identifier">to</span><span class="hl-code"> </span><span class="hl-identifier">Kill</span><span class="hl-code">&lt;/</span><span class="hl-identifier">cell</span><span class="hl-code">&gt;
        &lt;</span><span class="hl-identifier">cell</span><span class="hl-code">&gt;</span><span class="hl-identifier">John</span><span class="hl-code"> </span><span class="hl-identifier">Grisham</span><span class="hl-code">&lt;/</span><span class="hl-identifier">cell</span><span class="hl-code">&gt;
    &lt;/</span><span class="hl-identifier">row</span><span class="hl-code">&gt;
    ...
&lt;/</span><span class="hl-identifier">rows</span><span class="hl-code">&gt;</span></pre></div></div>					
<a href="javascript:void(0)" onclick="if(!mygrid.serialize) alert('this function is available only in professional edition'); mygrid.xml.row_attrs.push('price');mygrid.xml.row_attrs.push('date');alert(mygrid.serialize())">serialize</a>

<script>
	mygrid = new dhtmlXGridObject('gridbox');
	mygrid.setImagePath("../../codebase/imgs/");
	mygrid.setHeader("Sales, Book Title, Author");
	mygrid.setInitWidths("100,250,*")
	mygrid.setColAlign("right,left")
	mygrid.setColTypes("ed,ed,ed");
	mygrid.setColSorting("int,str")
	mygrid.init();
	if(mygrid.setSerializationLevel)
	mygrid.setSerializationLevel(0,1)
	mygrid.setSkin("light")
	mygrid.loadXML("grid_attr.xml");
	
	function addAttrToSelect(value){
		 var z = document.createElement('option');
		 z.value=value;
		 z.appendChild(document.createTextNode(value))  
		 document.getElementById("sel").appendChild(z);
		 z.selected = true;
	}
</script>

<!-- FOOTER -->
<table callspacing="0" cellpadding="0" border="0" class="sample_footer"><tr><td style="padding-left: 8px;">&copy; <a href="http://www.dhtmlx.com">DHTMLX LTD</a>. All rights reserved</td></tr></table>
<!-- FOOTER -->

</body>
</html>
